<template>
	<div class="header">
		<img src="@/assets/images/logo.png">
		<HeaderSearch></HeaderSearch>
		<HeaderCart></HeaderCart>
		<span v-if="!user">你好,请<router-link to="/login">登录</router-link>
			免费<router-link to="/register">注册</router-link>
		</span>
		<span v-else>欢迎您,{{user.username}},<a href="javascript:;" @click="logout">退出登录</a></span>
	</div>
</template>

<script>
	import HeaderCart from './HeaderCart/index.vue'
	import HeaderSearch from './HeaderSearch/index.vue'
	import {mapState,mapMutations} from 'vuex'
	export default {
		name:'Header',
		components:{
			HeaderSearch,
			HeaderCart
		},
		computed:{
			// user模块开启命名空间 此处直接采用mapState
			...mapState('user',[
				// 将this.user映射为this.$store.state.user.user
				'user'
			])
		},
		methods:{
			// 退出方法
			logout(){
				this.deleteUser()
			},
			// user模块开启命名空间 
			...mapMutations('user',[
				// 将this.deleteUser映射为 this.$store.commit('user/deleteUser')
				'deleteUser'
			])
		}
	}
</script>

<style scoped>
.header {
    width: 100%;
    /*position: relative;*/
}
.header img{
    width: 200px;
    height: 60px;
    margin: auto;  
}
.header span{
  margin-left: 20px;
}
.header a{
  text-decoration: none;
  color: red;

}
</style>